<!-- 文件模板 -->
<template>
	<view class="filePull">
		<view class="file_items">
			<view class="left">
				<image :src="`../../static/icon/${iconImg}.png`" mode=""></image>
				<view class="content">
					<text v-if="fileName">{{fileName}}</text>
					<view><text v-if="false">共{{pageNum}}页 |</text> <text>{{saveCapacity}}</text> </view>
				</view>
			</view>
			<image src="../../static/icon/delete.png" mode="" @tap="deleteFile"></image>
		</view>
		<view class="process">
			<view v-show="process < 100 && process >= 0">
				<progress :percent="process" stroke-width="2" activeColor="#0D53FE" />
				<view>
					{{process}}%
				</view>
			</view>
			<view v-show="process === 100" class="complete">
				上传完成
			</view>
		</view>
	</view>
</template>

<script setup>
import {defineProps, watch,ref} from 'vue'
const props = defineProps({
	fileName:{
		type:String,
		default:""
	},
	fileType:{
		type:String,
		required:true
	},
	timeDate:{
		type:String,
		default:""
	},
	saveCapacity:{
		type:String,
		default:""
	},

	pageNum:{
		type:Number,
		default:0
	},
	process:{
		type:Number,
		default:0
	},
	keyId:{
		type:Number,
		required:true
	}
})
const iconImg = ref(null)
const emun = {
	"png":"pngIcon",
	"word":"wordIcon",
	"ofd":"ofdIcon",
	"jpg":"jpgIcon",
	"pdf":"pdfIcon",
	"docx":"docxIcon"
}
watch(()=>props.fileType,(val)=>{
	console.log("这个时什么类型",val);
iconImg.value = emun[val]
},{
	deep:true,
	immediate:true
})
const emit = defineEmits(["cancelTask"])
// 删除上传文件
const deleteFile = ()=>{
 emit("cancelTask",props.keyId)
}

</script>

<style lang="scss" scoped>
	.filePull{
		margin-top: 32rpx;
		padding: 20rpx;
		background: #FCFCFE;
		border-radius: 8rpx;
		.file_items{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
				.left{
					display: flex;
					align-items: center;
					>image{
					width: 56rpx;
					height: 56rpx;	
					}
					.content{
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						>text{
								font-weight: 600;
								font-size: 28rpx;
								color: #00041A;
								margin-bottom: 10rpx;
						}
						>view{
							font-weight: 400;
							font-size: 24rpx;
							color: #BBC0C9;
						}
					}
		
				}
				>image{
					width:30rpx;
					height: 30rpx;
				}
			}
	}
.process{
	>view{
		font-weight: 400;
		font-size: 24rpx;
		color: #BBC0C9;
		
	}
	.complete{
		text-align: right;
		font-size: 22rpx;
		color: #027a02;
	}
}

</style>